<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/css/userRole.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/style_table.css}"/>
</head>
<style type="text/css">
    .form-horizontal {
        margin: 0;
        padding: 20px 50px
    }

    .form-group label {
        margin-top: 7px
    }

    .close_btn{
        height: 30px;
        width: 55px;
        position: absolute;
        right: 80px;
    }

</style>
<body>

<form id="fm" class="form-horizontal" novalidate>
    <div class="form-group">
        <div class="col-xs-9">
            <input type="hidden" name="uid" id="uid" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">用户名:</label>
        <div class="col-xs-9">
            <input type="text" name="username" id="username" class="form-control ">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">真实姓名:</label>
        <div class="col-xs-9">
            <input type="text" name="realName" id="realName" class="form-control ">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">性别:</label>
        <div class="col-xs-9">
            <input type="text" name="sex" id="sex" class="form-control ">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">电话:</label>
        <div class="col-xs-9">
            <input type="text" name="tel" id="tel" class="form-control ">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-3 control-label">住址:</label>
        <div class="col-xs-9">
            <input type="text" name="address" id="address" class="form-control ">
        </div>
    </div>
    <button id="save" class="btn btn-primary" type="button" onclick="updateUser();">保存</button>
    <button id="hide" class="btn btn-warning close_btn" type="button" onclick="parent.closeWindow();">关闭</button>
</form>

</body>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/plugin/easyui/jquery.easyui.min.js}"></script>
<script type="text/javascript" th:src="@{/plugin/layer/layer.js}"></script>
<script th:inline="javascript">
    $(function () {
        var uid = sessionStorage.getItem("uid");
        $("#uid").val(uid);
        console.log("uid=" + uid);

        //填充表单
        $.ajax({
            url: "/getUserById",
            type: "GET",
            data: {
                "uid" : uid
            },
            dataType: "json",
            success: function (result) {
                if(result.msg === 200){
                    $("#username").val(result.data.username);
                    $("#realName").val(result.data.realName);
                    $("#sex").val(result.data.sex);
                    $("#uid").val(result.data.uid);
                    $("#tel").val(result.data.tel);
                    $("#address").val(result.data.address);

                }
            }
        });

    });


    /**
     * 空值校验
     * @returns {boolean}
     */
    function checkForm() {
        var username = $("#username").val();
        var realName = $("#realName").val();
        var sex = $("#sex").val();
        var tel = $("#tel").val();
        var address = $("#address").val();
        if(parent.isEmpty(username)){
            layer.msg("请输入用户名");
            return false
        }else if(parent.isEmpty(realName)){
            layer.msg("请输入真实姓名");
            return false
        }else if(parent.isEmpty(sex)){
            layer.msg("请输入性别");
            return false
        }else if(parent.isEmpty(tel)){
            layer.msg("请输入电话号码");
            return false
        }else if(parent.isEmpty(address)){
            layer.msg("请输入家庭住址");
            return false
        }
        return true;
    }

    /**
     * 修改用户信息方法
     */
    function updateUser() {
        if(checkForm()){
            $.ajax({
                type: "POST",
                dataType : "json",
                url: "/updateUser",
                data: $("#fm").serialize(),
                success: function (result) {
                    if(result.msg === 200){
                        parent.searchUser(15,1);
                        parent.closeWindow("修改成功");
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });
        }

    }

</script>
</html>